<template>
  <ul v-infinite-scroll="toLoad" class="selectable-card-list">
    <template v-for="item in state.moldList" :key="item.pkMoldDoc">
      <li
        :class="[item.pkMoldDoc === state.selectMold ? 'selected' : '']"
        @click="toSelected(item.pkMoldDoc)"
      >
        <div style="font-size: 16px; line-height: 20px">
          <label class="moldCode">{{ item.moldCode }}</label>
          <label class="moldName">{{ item.moldName }}</label>
        </div>
        <div class="moldSpec">{{ item.moldSpec }}&nbsp;</div>
        <div class="moldRemark">{{ item.remark }}&nbsp;</div>
      </li>
    </template>
  </ul>
</template>
<script setup>
  import { getMoldDocPageApi } from '@/api/equip/mold_api'
  import { localStorageConfig } from '@/config/localstorage.config'
  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const $baseLoading = inject('$baseLoading')
  const $baseMessage = inject('$baseMessage')
  const loading = ref(false)
  const paginationParams = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0,
  })
  const moldDocQuery = ref({
    moldCode: '',
    moldName: '',
    moldSpec: '',
    state: 1,
    pkCorp,
  })
  const toLoad = () => {
    if (!loading.value && state.moldList.length < paginationParams.total) {
      paginationParams.pageNum++
      getData()
    }
  }
  const state = reactive({
    moldList: [],
    selectMold: '',
  })
  onMounted(() => {
    getData()
  })
  const toSelected = (selectMold) => {
    if (selectMold === state.selectMold) {
      state.selectMold = ''
    } else {
      state.selectMold = selectMold
    }
    _emits('toSelectMold', state.selectMold)
  }
  const getData = async () => {
    loading.value = true
    const load = $baseLoading()
    try {
      let params = {
        pageNum: paginationParams.pageNum,
        pageSize: paginationParams.pageSize,
        ...moldDocQuery.value,
      }
      const res = await getMoldDocPageApi(params)
      if (res.code === 2000) {
        if (paginationParams.pageNum > 1) {
          state.moldList = state.moldList.concat(res.data.list)
        } else {
          state.moldList = res.data.list
        }
        paginationParams.total = res.data.total
      } else {
        $baseMessage(res.msg, 'error')
      }
    } finally {
      load.close()
      loading.value = false
    }
  }
  const refreshData = () => {
    paginationParams.pageNum = 1
    getData()
  }
  const _emits = defineEmits(['toSelectMold'])
  const toFilter = (searchParam) => {
    moldDocQuery.value = {
      ...(moldDocQuery.value || {}),
      ...searchParam,
      state: 1,
    }
    refreshData()
  }
  defineExpose({ toFilter })
</script>
<style lang="scss" scoped>
  .selectable-card-list {
    display: grid;
    gap: 10px;
    height: calc(-150px + 100vh);
    padding: 0;
    margin: 0;
    overflow: scroll;
    list-style: none;
    &::-webkit-scrollbar {
      display: none; /* 针对Webkit浏览器，如Chrome、Safari */
    }
    li {
      max-height: 88px;
      padding: 12px;
      text-align: left;
      cursor: pointer;
      background: #f7f9fc;
      border: 2px solid #ddd;
      border-radius: 8px;
      transition: background 0.3s, border-color 0.3s;
      .moldCode {
        padding-right: 5px;
        font-size: 16px;
        color: #3498db;
      }
      .moldName {
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
      .moldSpec {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        color: #444;
      }
      .moldRemark {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        color: #666;
      }
    }
    li.selected {
      color: white;
      background: #3498db;
      border-color: #3498db;
      .moldCode {
        padding-right: 5px;
        font-size: 16px;
        color: white;
      }
      .moldName {
        font-size: 16px;
        font-weight: 600;
        color: white;
      }
      .moldSpec {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        color: white;
      }
      .moldRemark {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        color: white;
      }
    }
    li:hover {
      color: #3498db;
      background: #eaf3fc;
      .moldCode {
        padding-right: 5px;
        font-size: 16px;
        color: #3498db;
      }
      .moldName {
        font-size: 16px;
        font-weight: 600;
        color: #3498db;
      }
      .moldSpec {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        color: #3498db;
      }
      .moldRemark {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        color: #3498db;
      }
    }
  }
</style>
